<template>
	<view>
		<view class="uni-form-item uni-column">
			<view class="title">{{(index + 1)+ '.' + item.questionName}}({{item.answers.length<=1?'单选':'多选'}})
			</view>
			<!-- 在 radio-group 中进行题目类型判断  -->
			<radio-group :name="item.questionName" v-if="item.answers.length<=1">
				<!-- 每一项答案 -->
				<view class="test-item" v-for="(item2,index2) in item.options" :key="item2.id">
					<label>
						<radio :checked="item.answers.includes(optionList[index2])" disabled />
						<text>{{item2.optionContent}}</text>
					</label>
				</view>
			</radio-group>
			<!-- 在 checkbox-group 进行 else -->
			<checkbox-group :name="item.questionName" v-else>
				<view class="test-item" v-for="(item2,index2) in item.options" :key="item2.id">
					<label>
						<checkbox :checked="item.answers.includes(optionList[index2])" disabled />
						<text>{{item2.optionContent}}</text>
					</label>
				</view>
			</checkbox-group>
		</view>
	</view>
</template>

<script>
	export default {
		name: "AnswerKeys",
		data() {
			return {
				optionList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M'],
			};
		},
		props: {
			item: {
				type: Object,
				required: true
			},
			index: {
				type: Number,
				required: true
			}
		}
	}
</script>

<style lang="scss">
	.uni-form-item {
		.title {
			margin: 30rpx 0;
		}

		.test-item {
			margin: 20rpx 0;
		}

		radio-group {
			padding: 0 20rpx;
		}
	}
</style>
